<template>
  <div>
    <h1>{{ t("helloworld") }}</h1>
    <div>{{ t("sayhi") }}</div>
    <el-button @click="locale = 'zh'">中文</el-button>
    <el-button @click="locale = 'en'">英文</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 记录当前语言设定的标记
      locale: "zh",
      messages: {
        // 多个语言字典
        zh: {
          // 指定一个标识和对应的翻译
          helloworld: "你好世界!",
          sayhi: "亲你来啦?",
        },
        en: {
          helloworld: "Hello World!",
          sayhi: "come on baby",
        },
      },
    };
  },
  created() {
    console.log(this.$t);
  },
  methods: {
    // 翻译函数 接收一个语言标记, 根据当前的设定, 返回对应的翻译语句
    t(val) {
      // 1. 找到语言包
      const message = this.messages[this.locale];
      return message[val];
    },
  },
};
</script>
